<script setup>
//导入ex1组件   加入setup之后 不用下面的export  default 
import Ex1 from './components/Ex1.vue';
import Ex3 from './components/Ex3-setup.vue';
import Ex4 from './components/Ex4-ref.vue';
import Ex6 from './components/Ex6.vue';
import Ex7 from './components/Ex7-Proxy.vue';
import Ex8 from './components/Ex8-toRefs.vue';
import Ex9 from './components/Ex9-setupYFT.vue';
import Ex11 from './components/Ex11-computed.vue';
import Ex12 from './components/Ex12-computed全选.vue';
import Ex13 from './components/Ex13-类与绑定.vue';
import Ex14 from './components/Ex14-类样式.vue';
import Ex15 from './components/Ex15-vue3生命周期.vue';
import Ex16 from './components/Ex16-watch侦听.vue';
import Ex17 from './components/Ex17-watchEffect.vue';
import Ex18 from './components/Ex18-获取真实dom和组件实例.vue';
import Ex19 from './components/Ex19-setup的父传子.vue';
import Ex20 from './components/Ex21-setup父子传递.vue';
import Ex22 from './components/Ex22-v-model组件传值.vue';
import Ex24 from './components/Ex24-provide和inject实现多层传值.vue'
import Ex27 from './components/Ex27-插槽Slots.vue';
import aa from './components/aa.vue';
import Ex29 from './components/Ex29-自定义指令.vue'
import Ex30 from './components/Ex30-Teleport.vue'
// export default {
//     components: {
//       // 注册Ex1组件
//       Ex1,
//       Ex3,
//       Ex4,
//       Ex6,
//       Ex7,
//       Ex8,
//       Ex9
//     }
// };

</script>

<template>
    <!-- 在模板上面渲染Ex1组件 -->
    <!-- <Ex1/>
    <Ex3/>
    <Ex4/>
    <Ex6/>
    <Ex7/>
    <Ex8/>
    <Ex9/>
    <Ex11/>
    <Ex12/>
    <Ex13/>
    <Ex14/>
    <Ex15/>
    <Ex16/>
    <Ex17/>
    <Ex18/> 
    <Ex19/>
    <Ex22/>
    <Ex24/>
    <Ex27/>
    <aa/>
    <Ex29/> 
    <Ex30/>-->

    <!-- 路由 -->
    <router-view></router-view>

</template>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
